<template>
  <div>
    <input type="text" v-model="name1" /> +
    <input type="text" v-model="name2" /> =
    <span>{{ fullName }}</span>
    <button @click="changeName">改名</button>

    <!-- <span>第一个多选框</span> <input type="checkbox" v-model="flag" /> <br />
    <span>第二个多选框</span> <input type="checkbox"  v-model="flag1"/> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      name1: '欧阳',
      name2: '霸天',
      // flag: true,
    }
  },
  methods: {
    changeName() {
      this.fullName = 'harry-despot'
      console.log(this.fullName);
    },
  },
  computed: {
    // 默认写法
    fullName() {
      return this.name1 + '-' + this.name2
    },

    //完整写法
    // fullName: {
    //   //在获取fullName这个计算属性的时候会调用get方法并且返回get的返回值
    //   get() {
    //     // console.log('我是get，我被调用了')
    //     // return this.name1 + '-' + this.name2
    //     return this.flag

    //   },
    //   //在修改fullName这个计算属性的时候会调用set方法，set方法会传入一个要修改的值
    //   set(value) {
    //     // console.log('我是set，我被调用了')
    //     // this.name1 = value.split('-')[0]
    //     // this.name2 = value.split('-')[1]
    //     this.flag =value
    //   },
    // },
  },
}
</script>

<style></style>